<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单管理</title>
    <link rel="stylesheet" href="../../../static/web/layuitree/css/layui.css" th:href="@{/web/layuitree/css/layui.css}" />
    <link rel="stylesheet" href="../../../static/web/font-awesome/css/font-awesome.min.css" th:href="@{/web/font-awesome/css/font-awesome.min.css}" />

    <script src="../../../static/web/layuitree/layui.js" th:src="@{/web/layuitree/layui.js}"></script>
    <script src="../../../static/web/jquery-3.3.1/jquery-3.3.1.js" th:src="@{/web/jquery-3.3.1/jquery-3.3.1.js}"></script>
    <script src="../../../static/web/kitadmin/js/common.js" th:src="@{/web/kitadmin/js/common.js}"></script>

</head>
<body>
<div class="layui-row" style="margin-top: 10px">

    <div class="layui-col-md4" style="margin-left: 10px">
        <div class="layui-btn-group action">
            <button class="layui-btn" data-type="add" id="addMenu" shiro:hasPermission="menu:add">
                <i class="layui-icon layui-icon-add-1"></i>新增
            </button>
        </div>
    </div>

</div>

<div id="menuTree"></div>
</body>
<script type="text/javascript" th:inline="javascript">

    $(function () {
        var layout = [
            { name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 10%'},
            { name: '链接',headerClass: 'value_col', colClass: 'value_col', style: 'width: 10%',
                render: function(row) {
                    return '<div class="layui-table-cell laytable-cell-1-username">'+(!row.url?'':row.url)+'</div>'; //列渲染
                }
            },
            { name: '类型',headerClass: 'value_col', colClass: 'value_col', style: 'width: 10%',
                render: function(row) {
                    return '<div class="layui-table-cell laytable-cell-1-username">'+(row.menuType=="1"?'<i class="fa fa-keyboard-o" style="color: #5FB878;font-size: 20px"></i>':'<i class="fa fa-dedent" style="color: #5FB878;font-size: 20px"></i>')+'</div>'; //列渲染
                }
            },
            { name: '权限',headerClass: 'value_col', colClass: 'value_col', style: 'width: 10%',
                render: function(row) {
                    return '<div class="layui-table-cell laytable-cell-1-username">'+(!row.permission?'':row.permission)+'</div>'; //列渲染
                }
            },
            { name: '图标',headerClass: 'value_col', colClass: 'value_col', style: 'width: 5%',
                render: function(row) {
                    return '<div class="layui-table-cell laytable-cell-1-username"><i class="layui-icon" style="color: #5FB878;font-size: 25px">'+(!row.icon?'':row.icon)+'</i></div>'; //列渲染
                }
            },
            { name: '序号',headerClass: 'value_col', colClass: 'value_col', style: 'width: 5%',
                render: function(row) {
                    return '<div class="layui-table-cell laytable-cell-1-username"><i class="layui-icon">'+(!row.orderNum?'':row.orderNum)+'</i></div>'; //列渲染
                }
            },
            { name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 20%',
                render: function(row) {
                    var chil_len=row.childCount;
                    var str= '<a class="layui-btn layui-btn-primary layui-btn-xs" onclick="select(\'' + row.id + '\')"><i class="layui-icon">&#xe615;</i> 查看</a>' +
                        '<a class="layui-btn layui-btn-xs  layui-btn-normal" onclick="update(\'' + row.id + '\')"><i class="layui-icon">&#xe642;</i> 编辑</a>';
                    if(row.useType != 0)
                        str+='<a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del(\'' + row.id + '\')"><i class="layui-icon">&#xe640;</i> 删除</a>';
                    return str;
                }
            }
        ];

        layui.use(['tree', 'layer'], function() {
            //取得表格数据
            /*<![CDATA[*/
            var nodes = [[${menuList}]];
            /*]]>*/

            layui.treeGird({
                elem: '#menuTree',
                nodes: nodes,
                layout: layout
            });
        });


        //绑定添加按钮
        $('#addMenu').on('click',function (e) {
            openWindow('menu-add', '添加菜单', '/webs/menu/addMenu', '60%','90%');
        });

    });

    //详情显示
    function select(id) {
        openWindow('menu-detail', '菜单明细', '/webs/menu/detailMenu?id='+id, '60%','90%');
    }

    //单个删除
    function del(id) {
        layer.confirm('确定删除菜单?', {icon: 3, title: '提示'}, function(){
            $.ajax({
                url: "/webs/menu/deleteMenu",
                type: "post",
                data: {id: id},
                success: function (data) {
                    if(data.code == 'SUCCESS'){
                        location.replace(location.href);
                        layer.msg("删除成功！", {icon:6,offset: 'rb',area:['200px','80px'],anim:2});
                    }else{
                        layer.msg("删除失败",  {icon: 5});
                    }
                }
            });
        });
    }

    //编辑
    function update(id){
        openWindow('menu-update', '编辑菜单', '/webs/menu/updateMenu?id='+id, '60%','90%');
    }

</script>

</html>